<template>
  <header class="title">
    <div class="username">
      <!-- <div class="imgBg">
        <img src="../assets/img/TX.png" alt="" />
      </div> -->
      <span>{{ $store.state.username }}</span>
      <img src="../assets/img/SCYL.png" alt="" @click="lookInterests" />
    </div>
    <zs-location color="white" icon="white" />
  </header>
</template>

<script>
import Location from '@c/Location.vue'
export default {
  name: 'Title',
  props: {
    status: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {}
  },
  components: {
    'zs-location': Location,
  },
  methods: {
    lookInterests() {
      this.$router.push({
        name: 'MemberInteret',
        query: {
          isPay: this.status, //不等于0代表完成首次
          username: this.$store.state.username,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0.4rem 0.933333rem 0.533333rem 24px;
  font-size: 0.426667rem;
  > div {
    display: flex;
    align-items: center;
  }
  .username {
    display: flex;
    align-items: center;
    .imgBg {
      margin-right: 0.266667rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 46px;
      height: 46px;
      background-color: #707587;
      border-radius: 50%;
      img {
        width: 1.013333rem;
        height: 1.013333rem;
      }
    }
    > img {
      margin-left: 6px;
      width: 76px;
      height: 25px;
    }
  }
}
</style>
